<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
		<title>提交记录</title>
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
		<link rel="stylesheet" href="../css/property.css" />
		<link rel="stylesheet" href="../font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="../css/addproperty.css" />
		<script type="text/javascript" src="../js/picker.min.js"></script>
		<style type="text/css">
			@font-face {
				font-family: 'iconfont';
				src: url('../iconfont/iconfont.eot');
				/* IE9*/
				src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
				url('../iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
				url('../iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
				url('../iconfont/iconfont.svg#iconfont') format('svg');
				/* iOS 4.1- */
			}
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
			}
		</style>
		<!--	<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>-->
	</head>

	<body>
		<div class="protitle1">
			<a href="index.html"><span class="fa fa-angle-left fa-2x" aria-hidden="true" style="margin-top: 3px;"></span>
			</a>
			<!--下拉菜单-->
			<div class="dropdown">
				<span><i class="iconfont suolue">&#xeac5;</i></span>
				<div class="dropdown-content">
					<a href="#">
						<p>Hello World!</p>
					</a>

					<a href="#">
						<p>Hello World!</p>
					</a>

					<a href="#">
						<p>Hello World!</p>
					</a>
				</div>
			</div>
		</div>
		<div class="protitle">
			<form action="#" id="search_box">
				<div class="wrapper">
					<input type="text" id="search" name="search" placeholder="" class="insearch" />
					<i class="fa fa-times-circle" aria-hidden="true" style="font-size: 23px; display:none;" id="inputclose"></i>
					<button type="submit" class="search_btn"><img src="../img/search_icon.png" title="Search" class="search_img" /></button>
				</div>
			</form>

		</div>

		<div class="pro-header">
			<!--联动选择-->

			<div class="row">

				<a href="#" class="btn btn-info btn-lg active" role="button" id="sel_city">筛选<img src="../img/jiantou_04.png"></a>
			</div>

			<p>共计：<span>198</span><i class="fa fa-bars" style="font-size: 25px;" aria-hidden="true" id="caozuo"></i></p>

		</div>
		<hr />
		<div class="tzall">

			<div class="tzdiv2">
				<p><span>贴码</span></p>
				<p class="pro-p">2018/09/19</p>
				<span class="tzsj1 no-auditing">未审核</span>
				<i class="fa fa-times-circle delete del" aria-hidden="true" style="font-size: 30px; display: none;" id="proclose"></i>
			</div>
		</div>
		<hr />
		<div class="tzall">

			<div class="tzdiv2">
				<p><span>照片</span></p>
				<p class="pro-p">2018/01/02</p>
				<span class="tzsj1 no-pasted">未通过</span>
				<i class="fa fa-times-circle delete del" aria-hidden="true" style="font-size: 30px; display: none;" id="proclose"></i>
			</div>
		</div>
		<hr />
		<div class="tzall">

			<div class="tzdiv2">
				<p><span>照片</span></p>
				<p class="pro-p">2018/01/02</p>
				<span class="tzsj1">+5</span>
				<i class="fa fa-times-circle delete del" aria-hidden="true" style="font-size: 30px; display: none;" id="proclose"></i>
			</div>
		</div>
		<hr />

		<script type="text/javascript" src="../../../static/js/jquery-1.4.2.min.js"></script>

		<script type="text/javascript">
			var status = -1;

			$(function() {
				$('.tzall').click(function() {

					if(status == 1) {
						$(".tzsj1").animate({
							right: '0px',
							left: '0px'
						});
						$(".delete").fadeOut(500);
					} else {
						var id = $(this).find('i').attr("data-id");
						window.location.href = "detail.html";
					}

					status = -status;
				})

				$("#caozuo").click(function() {
					//			$("button").animate({
					//				right:'80px'
					//			});
					if(status == -1) {
						$(".tzsj1").animate({
							right: '50px',
							left: '-50px'
						});
						$(".delete").fadeIn(500);
					} else {
						$(".tzsj1").animate({
							right: '0px',
							left: '0px'
						});
						$(".delete").fadeOut(500);
					}

					status = -status;

				});

				$(".insearch").bind('input propertychange', function() {
					if($(this).attr("value") == "") {
						$("#inputclose").fadeOut();
					} else {
						$("#inputclose").fadeIn();
					}

				});

				$("#inputclose").click(function() {
					$(".insearch").attr("value", "");
					$(this).fadeOut();
				})

				$('.iconfont').click(function() {
					$('.dropdown-content').toggle(150)
				})

				//搜索框删除图标的变化
				if($(".insearch").val() == "") {
					$("#inputclose").fadeOut();
				} else {
					$("#inputclose").fadeIn();
				}

				//删除小区
				$('.delete').click(function() {
					if(confirm('确定要删除该小区吗？')) {
						$.ajax({
							type: "post",
							url: "{php echo $this->createMobileUrl('admin/region', array('op' => 'list'))}",
							data: {
								id: $(this).attr("data-id")
							},
							dataType: "json",
							success: function(result) {
								if(result.state == 'done') {
									setTimeout(function() {
										window.location.reload();
									}, 1000);
								} else if(result.state == 'fail') {
									alert("刪除失败！请先删除该小区底下的区域");
								}
							}

						});
					}
				})
			});
		</script>

		<!--联动选择-->

		<script>
			var nameEl = document.getElementById('sel_city');
			var city = [{
					"name": "北京",
					"sub": [{
							"name": "东城区"
						},
						{
							"name": "西城区"
						},

						{
							"name": "其他"
						}
					],
					"type": 0
				},

				{
					"name": "福建",
					"sub": [{
							"name": "福州",
							"sub": [{
									"name": "鼓楼区"
								},
								{
									"name": "台江区"
								},
								{
									"name": "仓山区"
								},
								{
									"name": "马尾区"
								},
								{
									"name": "晋安区"
								},
								{
									"name": "福清市"
								},
								{
									"name": "长乐市"
								},
								{
									"name": "闽侯县"
								},
								{
									"name": "闽清县"
								},
								{
									"name": "永泰县"
								},
								{
									"name": "连江县"
								},
								{
									"name": "罗源县"
								},
								{
									"name": "平潭县"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "厦门",
							"sub": [{
									"name": "思明区"
								},
								{
									"name": "海沧区"
								},
								{
									"name": "湖里区"
								},
								{
									"name": "集美区"
								},
								{
									"name": "同安区"
								},
								{
									"name": "翔安区"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "莆田",
							"sub": [{
									"name": "城厢区"
								},
								{
									"name": "涵江区"
								},
								{
									"name": "荔城区"
								},
								{
									"name": "秀屿区"
								},
								{
									"name": "仙游县"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "三明",
							"sub": [{
									"name": "梅列区"
								},
								{
									"name": "三元区"
								},
								{
									"name": "永安市"
								},
								{
									"name": "明溪县"
								},
								{
									"name": "将乐县"
								},
								{
									"name": "大田县"
								},
								{
									"name": "宁化县"
								},
								{
									"name": "建宁县"
								},
								{
									"name": "沙县"
								},
								{
									"name": "尤溪县"
								},
								{
									"name": "清流县"
								},
								{
									"name": "泰宁县"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "泉州",
							"sub": [{
									"name": "鲤城区"
								},
								{
									"name": "丰泽区"
								},
								{
									"name": "洛江区"
								},
								{
									"name": "泉港区"
								},
								{
									"name": "石狮市"
								},
								{
									"name": "晋江市"
								},
								{
									"name": "南安市"
								},
								{
									"name": "惠安县"
								},
								{
									"name": "永春县"
								},
								{
									"name": "安溪县"
								},
								{
									"name": "德化县"
								},
								{
									"name": "金门县"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "漳州",
							"sub": [{
									"name": "芗城区"
								},
								{
									"name": "龙文区"
								},
								{
									"name": "龙海市"
								},
								{
									"name": "平和县"
								},
								{
									"name": "南靖县"
								},
								{
									"name": "诏安县"
								},
								{
									"name": "漳浦县"
								},
								{
									"name": "华安县"
								},
								{
									"name": "东山县"
								},
								{
									"name": "长泰县"
								},
								{
									"name": "云霄县"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "南平",
							"sub": [{
									"name": "延平区"
								},
								{
									"name": "建瓯市"
								},
								{
									"name": "邵武市"
								},
								{
									"name": "武夷山市"
								},
								{
									"name": "建阳市"
								},
								{
									"name": "松溪县"
								},
								{
									"name": "光泽县"
								},
								{
									"name": "顺昌县"
								},
								{
									"name": "浦城县"
								},
								{
									"name": "政和县"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "龙岩",
							"sub": [{
									"name": "新罗区"
								},
								{
									"name": "漳平市"
								},
								{
									"name": "长汀县"
								},
								{
									"name": "武平县"
								},
								{
									"name": "上杭县"
								},
								{
									"name": "永定县"
								},
								{
									"name": "连城县"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "宁德",
							"sub": [{
									"name": "蕉城区"
								},
								{
									"name": "福安市"
								},
								{
									"name": "福鼎市"
								},
								{
									"name": "寿宁县"
								},
								{
									"name": "霞浦县"
								},
								{
									"name": "柘荣县"
								},
								{
									"name": "屏南县"
								},
								{
									"name": "古田县"
								},
								{
									"name": "周宁县"
								},
								{
									"name": "其他"
								}
							],
							"type": 0
						},
						{
							"name": "其他"
						}
					],
					"type": 1
				},

			]

			var first = []; /* 省，直辖市 */
			var second = []; /* 市 */
			var third = []; /* 镇 */

			var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */

			var checked = [0, 0, 0]; /* 已选选项 */

			function creatList(obj, list) {
				obj.forEach(function(item, index, arr) {
					var temp = new Object();
					temp.text = item.name;
					temp.value = index;
					list.push(temp);
				})
			}

			creatList(city, first);

			if(city[selectedIndex[0]].hasOwnProperty('sub')) {
				creatList(city[selectedIndex[0]].sub, second);
			} else {
				second = [{
					text: '',
					value: 0
				}];
			}

			if(city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
				creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
			} else {
				third = [{
					text: '',
					value: 0
				}];
			}

			var picker = new Picker({
				data: [first, second, third],
				selectedIndex: selectedIndex,
				title: '筛选'
			});

			picker.on('picker.select', function(selectedVal, selectedIndex) {
				var text1 = first[selectedIndex[0]].text;
				var text2 = second[selectedIndex[1]].text;
				var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';

				nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
			});

			picker.on('picker.change', function(index, selectedIndex) {
				if(index === 0) {
					firstChange();
				} else if(index === 1) {
					secondChange();
				}

				function firstChange() {
					second = [];
					third = [];
					checked[0] = selectedIndex;
					var firstCity = city[selectedIndex];
					if(firstCity.hasOwnProperty('sub')) {
						creatList(firstCity.sub, second);

						var secondCity = city[selectedIndex].sub[0]
						if(secondCity.hasOwnProperty('sub')) {
							creatList(secondCity.sub, third);
						} else {
							third = [{
								text: '',
								value: 0
							}];
							checked[2] = 0;
						}
					} else {
						second = [{
							text: '',
							value: 0
						}];
						third = [{
							text: '',
							value: 0
						}];
						checked[1] = 0;
						checked[2] = 0;
					}

					picker.refillColumn(1, second);
					picker.refillColumn(2, third);
					picker.scrollColumn(1, 0)
					picker.scrollColumn(2, 0)
				}

				function secondChange() {
					third = [];
					checked[1] = selectedIndex;
					var first_index = checked[0];
					if(city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
						var secondCity = city[first_index].sub[selectedIndex];
						creatList(secondCity.sub, third);
						picker.refillColumn(2, third);
						picker.scrollColumn(2, 0)
					} else {
						third = [{
							text: '',
							value: 0
						}];
						checked[2] = 0;
						picker.refillColumn(2, third);
						picker.scrollColumn(2, 0)
					}
				}

			});

			picker.on('picker.valuechange', function(selectedVal, selectedIndex) {
				console.log(selectedVal);
				console.log(selectedIndex);
			});

			nameEl.addEventListener('click', function() {
				picker.show();
			});
		</script>

	</body>

</html>